<template>
  <f7-page>
    <f7-navbar sliding>
      <div  @click="$f7router.back()">
        <f7-nav-left >
            <f7-icon f7="chevron_left"></f7-icon>
            <span class="Back">返回</span>
        </f7-nav-left>
      </div>
       地址管理
      <f7-nav-right></f7-nav-right>
      <f7-subnavbar>
        <f7-segmented raised>
          <f7-button :class="{'active':addType=='pickUpAdd'}"  @click="pickAdd('pickUpAdd')">提货地址</f7-button>
          <f7-button :class="{'active':addType=='deliveryAdd'}"  @click="pickAdd('deliveryAdd')">收货地址</f7-button>
        </f7-segmented>
      </f7-subnavbar>
    </f7-navbar>

    <!--<f7-row no-gutter >-->
      <!--<f7-col width="80">-->
        <!--<f7-icon f7="search_strong" class="search_img"></f7-icon>-->
        <!--<input type="text" placeholder="搜索联系人"  class="Please_enter">-->
      <!--</f7-col>-->
      <!--<f7-col width="20">-->
        <!--<f7-button class="search">搜索</f7-button>-->
      <!--</f7-col>-->
    <!--</f7-row>-->


    <f7-list media-list v-for="item in pickUpAdds" v-show="addType=='pickUpAdd'" >
      <ul>
        <li @click='selectAdd(item)'>
          <img slot="media" round src="../../assets/img/landmark.png" class="landmark"/>
          <h2>
            {{item.province}}
            {{item.city}}
            {{item.district}}
            {{item.addr}}
          </h2>
          <h2>联系人：{{item.prin_name}} &nbsp;&nbsp;&nbsp;&nbsp;<span class="ng-binding">手机号：{{item.prin_phone}}&nbsp;&nbsp;</span>
          </h2>
        </li>
        <li>
          <f7-list-item radio name="my-pickup" :value="item._id" :checked="item.is_default" class="che_c" @click.stop="setDefaultAdd('Pick_up_the_goods',item)"></f7-list-item>
          <span class="text-gray">默认地址</span>
          <i class="icon">
            <span class="text-gray">编辑</span>
            <span class="text-gray">删除</span>
          </i>
        </li>

      </ul>
    </f7-list>

    <f7-list media-list v-for="item in deliveryAdds" v-show="addType=='deliveryAdd'">
      <ul>
        <li @click='selectAdd(item)'>
          <img slot="media" round src="../../assets/img/landmark.png" class="landmark"/>
          <h2>
            {{item.province}}
            {{item.city}}
            {{item.district}}
            {{item.addr}}
          </h2>
          <h2>联系人：{{item.prin_name}} &nbsp;&nbsp;&nbsp;&nbsp;<span class="ng-binding">手机号：{{item.prin_phone}}&nbsp;&nbsp;</span>
          </h2>
        </li>
        <li>
          <f7-list-item radio name="my-delivery" :value="item._id" :checked="item.is_default" class="che_c" @click="setDefaultAdd('Delivery_of_the_goods',item._id)"></f7-list-item>
          <span class="text-gray">默认地址</span>
          <i class="icon">
            <span class="text-gray">编辑</span>
            <span class="text-gray">删除</span>
          </i>
        </li>

      </ul>
    </f7-list>
    <f7-block>
      <f7-button class="text-red" @click="setPop(true)">+ 新增地址</f7-button>
    </f7-block>




    <f7-popup :opened="myPop1">
         <f7-navbar>
             <div  @click="$f7router.back()">
                      <f7-nav-left >
                          <f7-icon f7="chevron_left"></f7-icon>
                          <span class="Back">返回</span>
                      </f7-nav-left>
             </div>
             提货地址
                <f7-nav-right >
                  <f7-link>通讯录导入</f7-link>
                </f7-nav-right>
        </f7-navbar>

      <f7-page bg-color="#f5f5f5">

          <f7-list form>
              <f7-list-item>
                <span class="item-sap">联系人</span>
                  <input type="text" placeholder="请输入" v-model="prin_name" class="Please_inpt">
              </f7-list-item>
              <f7-list-item>
                <span class="item-sap">手机号</span>
                  <input type="number" v-model="prin_phone" placeholder="请输入" class="Please_inpt">
              </f7-list-item>
              <f7-list-item>
                 <span class="item-sap">所在地</span>
                  <i class="pull-right" @click="delogAdd()">请选择 {{addsStr}}</i>
              </f7-list-item>
                <f7-list-item>
                         <textarea type="textarea"  v-model="addr" placeholder="请输入详细地址"  maxlength="200"></textarea>
              </f7-list-item>
            </f7-list>
                <f7-toolbar>
                    <div class="row button-foot">
                        <div class="col col-50">
                          <f7-button class="text-red" @click="setPop(false)">取消</f7-button>
                        </div>
                        <div class="col col-50">
                          <f7-button class="text-red" @click="saveAdds()">保存</f7-button>
                          <addSelect ref="addSelect" type="radio" @addsDone="addsDoneEmit"></addSelect>
                        </div>
                    </div>
                </f7-toolbar>
      </f7-page>
    </f7-popup>









  </f7-page>
</template>

<script>
  import F7Page from "framework7-vue/src/components/page";
  import F7Link from "framework7-vue/src/components/link";
  import addSelect from '../../components/addSelect.vue'

  export default {
    name: "address",
    components: {
      F7Link,
      F7Page,
      addSelect
    },
    data(){
      return {
        myPop1: false,
        pickUpAdds: '',//提货地址
        deliveryAdds: '',//交货地址
        addType: 'pickUpAdd',
        addsStr:'',
        saveAddParam:{

        },
        prin_name:'',
        prin_phone:'',
        addr:''
      }
    },
    methods: {
      async getAdds() {
          let pickUpAddsParam={differentiate: "Pick_up_the_goods"};
          let deliveryAdds={differentiate: "Delivery_of_the_goods"};
          this.pickUpAdds = (await this.AccountService.getAdds(pickUpAddsParam)).data.data
          // common.addAttrSwitch(this.pickUpAdds)
          this.deliveryAdds = (await this.AccountService.getAdds(deliveryAdds)).data.data
          // common.addAttrSwitch(this.deliveryAdds)
      },
      pickAdd(type){
        this.addType = type
      },
      setPop(type){
        this.myPop1=type;
      },
      async saveAdds(){
          this.myPop1=false;
          this.saveAddParam.addr=this.addr;
          this.saveAddParam.prin_phone=this.prin_phone;
          this.saveAddParam.prin_name=this.prin_name;
          this.saveAddParam.differentiate="Pick_up_the_goods";
          let addAddsRes = (await this.AccountService.addAdds(this.saveAddParam)).data.data;
          this.getAdds()

      },
      delogAdd(){
          this.$refs.addSelect.openPop()
      },
      addsDoneEmit (data) {
          this.saveAddParam.province=data.sourceData.city[0].ProID;
          this.saveAddParam.city=data.sourceData.city[0].CityID;
          this.saveAddParam.district=data.sourceData.district[0].DisID;
          this.addsStr = `${data.province[0]} ${data.city} ${data.district}`
      },
      async setDefaultAdd(addType,add, event){
          let param={
              differentiate:addType,
              address_id:add._id
          }
          let setDefaultAddRes = (await this.AccountService.setDefaultAdd(param)).data;
          if(setDefaultAddRes.status=='success'){
            this.toast('设置默认成功')
          }else{
            this.toast('设置默认失败')
          }
      },
      selectAdd(adds){
        // 存储仓库并返回
        // let param = this.$f7Route.params;
        // if(param && param.source) {
        //
        //   let paramT=param.source.split('.');
        //   console.log('来了', paramT)
        //   if(paramT[0]==='publishTrans' && Storage.get('publishTrans')){
        //     console.log('来了?')
        //     // 存储 返回
        //     let publishTrans=Storage.get('publishTrans');
        //     publishTrans[paramT[1]]=x;
        //     Storage.set('publishTrans',publishTrans);
        //     this.$f7.router.navigate('/mine/publishTransSu/')
        //
        //   }
        // }
          this.$store.commit('setAdds',adds)
          this.$f7.router.back('/mine/creatDriverDemand/')

      }
    },
    mounted() {
      this.getAdds()
    }
  }
</script>

<style scoped>
    .ios .color-theme-white .button {
        border-color: #999999;
        color: #999999;
    }
  .Back {
    color: #fff;
    font-size: 16px;
    margin-left: 4px;
  }

  .ios .button {
    border: none;
    border-left-width: 0 !important;
    color: #777;
    font-size: 14px;
    font-weight: normal;
  }

  .active {
    color: #000 !important;
    font-weight: bold !important;
  }

  .ios .subnavbar {
    margin-bottom: 30px;
    border-color: #f5f5f5;
  }

  .row {
    position: relative;
    padding: 10px;
    height: 35px;
  }

  .ios .row .col-80 {
    background: #fff;
    border-radius: 4px;
    height: 34px;
  }

  .search_img {
    position: absolute;
    font-size: 16px;
    color: #999;
    top: 19px;
    left: 20px;
  }

  .Please_enter {
    margin-left: 30px;
    width: 80%;
    height: 34px;
  }

  .search {
    background: #fff;
    color: #999 !important;
    border-color: #fff !important;
    font-size: 12px;
    height: 34px !important;
    line-height: 34px !important;
  }

  .ios .block {
    /*position: fixed;*/
    margin: 0px;
    padding: 0px;
    bottom: 0;
    width: 100%;
  }

  .text-red {
    color: #DB4226 !important;
    background: #fff;
    line-height: 40px !important;
    height: 40px !important;
    border-radius: 0px !important;
  }

  .ios .list {
    margin: 10px 0px;
  }

  .ios .list ul {
    padding: 10px 10px 10px 45px;
  }

  .ios .list ul li {
    padding: 5px 0px;
  }

  .ios .list ul h2 {
    margin: 0;
    padding-bottom: 2px;
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }

  .landmark {
    border-radius: 0;
    width: 21px;
    height: 30px;
    left: -30px;
    top: 7px;
    position: absolute;
  }

  .text-gray {
    font-size: 14px;
    color: #999;
    margin: 0 5px;
  }

  .icon {
    float: right;
  }

  .che_c {
    left: -45px;
    top: -11px;
    position: absolute;
  }



  .item-sap{
    font-size: 14px;
    display: inline;
    color: #333;
    width: 20%;
}
  .Please_inpt {
    height: 34px !important;
    color: #333 !important;
    font-size: 14px !important;
    text-align: right;
  }
  .pull-right{
    color: #333;
    float: right;
    font-size: 14px;
    font-style:normal;
  }
    .button-foot{
        width: 100%;
        height: 40px;
        padding: 0px;
        background: white;
    }
    .button-foot .col-50{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
